<template>
  <div class="carbon-debug">
    <h2>碳信用API调试页面</h2>
    
    <div class="debug-section">
      <h3>1. 资产统计API测试</h3>
      <el-button @click="testAssetsTotal" type="primary">测试资产统计</el-button>
      <div v-if="assetsTotalResult" class="result-box">
        <h4>响应结果：</h4>
        <pre>{{ JSON.stringify(assetsTotalResult, null, 2) }}</pre>
      </div>
    </div>
    
    <div class="debug-section">
      <h3>2. 交易所列表API测试</h3>
      <el-button @click="testExchangeList" type="primary">测试交易所列表</el-button>
      <div v-if="exchangeListResult" class="result-box">
        <h4>响应结果：</h4>
        <pre>{{ JSON.stringify(exchangeListResult, null, 2) }}</pre>
      </div>
    </div>
    
    <div class="debug-section">
      <h3>3. 碳信用列表API测试</h3>
      <el-button @click="testCreditList" type="primary">测试碳信用列表</el-button>
      <div v-if="creditListResult" class="result-box">
        <h4>响应结果：</h4>
        <pre>{{ JSON.stringify(creditListResult, null, 2) }}</pre>
      </div>
    </div>
    
    <div class="debug-section">
      <h3>4. 项目列表API测试</h3>
      <el-button @click="testProjectList" type="primary">测试项目列表</el-button>
      <div v-if="projectListResult" class="result-box">
        <h4>响应结果：</h4>
        <pre>{{ JSON.stringify(projectListResult, null, 2) }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCarbonCreditAssetsTotal,
  loadCarbonExchangeList,
  loadCarbonCreditPageList,
  getCarbonMetaregistryPageList
} from '@/api/carbonAssetApi'

export default {
  name: 'CarbonDebug',
  data() {
    return {
      assetsTotalResult: null,
      exchangeListResult: null,
      creditListResult: null,
      projectListResult: null
    }
  },
  methods: {
    async testAssetsTotal() {
      try {
        const res = await getCarbonCreditAssetsTotal()
        this.assetsTotalResult = res
        console.log('资产统计API响应:', res)
      } catch (err) {
        console.error('资产统计API错误:', err)
        this.assetsTotalResult = { error: err.message }
      }
    },
    
    async testExchangeList() {
      try {
        const res = await loadCarbonExchangeList({ asc: true })
        this.exchangeListResult = res
        console.log('交易所列表API响应:', res)
      } catch (err) {
        console.error('交易所列表API错误:', err)
        this.exchangeListResult = { error: err.message }
      }
    },
    
    async testCreditList() {
      try {
        const data = {
          asc: true,
          current: 1,
          size: 10
        }
        const res = await loadCarbonCreditPageList(data)
        this.creditListResult = res
        console.log('碳信用列表API响应:', res)
      } catch (err) {
        console.error('碳信用列表API错误:', err)
        this.creditListResult = { error: err.message }
      }
    },
    
    async testProjectList() {
      try {
        const data = {
          current: 1,
          size: 10,
          async: true,
          projectName: '',
          projectStatusCode: "0100000013"
        }
        const res = await getCarbonMetaregistryPageList(data)
        this.projectListResult = res
        console.log('项目列表API响应:', res)
      } catch (err) {
        console.error('项目列表API错误:', err)
        this.projectListResult = { error: err.message }
      }
    }
  }
}
</script>

<style scoped>
.carbon-debug {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.debug-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f9f9f9;
}

.debug-section h3 {
  margin-top: 0;
  color: #333;
}

.result-box {
  margin-top: 15px;
  padding: 15px;
  background: white;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.result-box h4 {
  margin-top: 0;
  color: #666;
}

.result-box pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow-y: auto;
}
</style>
